<template>
	<div class="roommatePage">
		<NewsHeader 
		:isInput="dataArr.isInput" 
		:iconArr="dataArr.iconArr" 
		:placeholder="dataArr.placeholder" 
		:aimUrl = 'dataArr.aimUrl'
		:rightUrl='dataArr.rightUrl'
		/>
		<div class="roommatePageContainer">
			<div class="containerBg"></div>
			<div class="roommatePageCont">
				<div class="roommateDetail">
					<p class="roommateDetailTitle">
						<span>无房</span>
						<span>有意思的小伙伴一起奋斗吧</span>
					</p>
					<p class="roommateDetailImg">
						<img src="../../assets/images/shouye/img_tu01@2x.png" alt="">
					</p>
					<p class="roommateDetailNews">
						<img src="../../assets/images/shouye/img_touxiang01@2x.png" alt="">
						<span>闫江南</span>
						<img src="../../assets/images/shouye/img_man@2x.png" alt="">
						<span>12分钟前更新</span>
					</p>
				</div>
				<div class="roommateDetail">
					<p class="roommateDetailTitle">
						<span id="haveHouse">有房</span>
						<span>两个女生或一对情侣,35-40平超大卧室转租。</span>
					</p>
					<p class="roommateDetailImg">
						<img src="../../assets/images/shouye/img_tu01@2x.png" alt="">
					</p>
					<p class="roommateDetailNews">
						<img src="../../assets/images/shouye/img_touxiang02@2x.png" alt="">
						<span>黄克荣</span>
						<img src="../../assets/images/shouye/icon_woman@2x.png" alt="">
						<span>20分钟前更新</span>
					</p>
				</div>
			</div>
			<div class="tuBiao">
				<img src="../../assets/images/shouye/icon_fabu1@2x.png" alt="">
				<img src="../../assets/images/shouye/icon_chakan@2x.png" alt="">
			</div>
		</div>
	</div>
</template>
<script>
import NewsHeader from '../../components/shopheader'
export default{
	name:'roommatePage',
	components:{
		NewsHeader
	},
	data(){
		return{
			dataArr:{
					isInput:false,
					iconArr:[
						{
							iconLeft:"icon-zuojiantou",
							iconRight:"icon-xiaoxi"
						}
					],
					placeholder:"找室友",
					aimUrl:'/layout/home',
					rightUrl:"/wonews"
			}
		}
	}
}
</script>
<style scoped lang="less">
.roommatePage{
	width: 100%;
	height: 100%;
	.roommatePageContainer{
		width: 100%;
		margin-top: 88 / 100rem;
		box-sizing: border-box;
		.containerBg{
			width: 100%;
			height: 460 / 100rem;
			background-image: url('../../assets/images/shouye/img_banner@2x.png');
			background-size: 100%;
			background-repeat: no-repeat;
		}
		.roommatePageCont{
			width: 100%;
			padding: 0 20 / 100rem;
			margin-top: -38 / 100rem;
			box-sizing: border-box;
			.roommateDetail{
				width: 100%;
				height: 344 / 100rem;
				margin-bottom: 20 / 100rem;
				background-color: rgba(255, 255, 255, 1);
				box-shadow: 0 0 14 / 100rem 14 / 100rem rgba(0, 0, 0, 0.1);
				border-radius: 10 / 100rem;
				position: relative;
				.roommateDetailTitle{
					#haveHouse{
						box-shadow: 0 0 10 / 100rem 2 / 100rem rgba(255, 86, 85, 0.8);
						color: rgba(255, 85, 84, 0.8);
					}
					span:nth-child(1){
						display: inline-block;
						width: 100 / 100rem;
						height: 43 / 100rem;
						text-align: center;
						line-height: 43 / 100rem;
						box-shadow: 0 0 10 / 100rem 2 / 100rem #e6e6e6; 
						color: rgba(0, 0, 0, 0.5);
						font-size: 26 / 100rem;
						border-radius:  8 / 100rem;
						margin-left: 20 / 100rem;
						margin-top: 8 / 100rem;
					}
					
					span:nth-child(2){
						display: inline-block;
						color: rgba(0, 0, 0, 0.8);
						font-size: 26 / 100rem;
						margin-left: 20 / 100rem;
						margin-top: 20 / 100rem;
					}
				}
				.roommateDetailImg{
					img{
						margin-left: 20 / 100rem;
						margin-top: 16 / 100rem;
						width: 368 / 100rem;
						height: 208 / 100rem; 
					}
				}
				.roommateDetailNews{
					width: 100%;
					height: 69 / 100rem;
					line-height: 69 / 100rem;
					vertical-align: middle;
					position: relative;
					img:nth-child(1){
						margin-left: 20 / 100rem;
						margin-top: 12 / 100rem;
						margin-bottom: 12 / 100rem;
						width: 44 / 100rem;
						height: 44 / 100rem; 
					}
					span:nth-child(2){
						position: absolute;
						color: rgba(0, 0, 0, 0.8);
						font-size: 13 / 100rem;
						left: 71 / 100rem;
					}
					img:nth-child(3){
						width: 18 / 100rem;
						height: 27 / 100rem;
						position: absolute;
						left: 158 / 100rem;
						top: 22 / 100rem;
					}
					span:nth-child(4){
						color: #ff5555;
						font-size: 26 / 100rem;
						position: absolute;
						right: 24 / 100rem;
						// bottom: 20 / 100rem;
					}
				}
			}
		}
	}
	.tuBiao{
		position: fixed;
		right: 42 / 100rem;
		bottom:154 / 100rem;
		img{
			display: block;
			width: 68 / 100rem;
			height: 69 / 100rem;
		}
		img:nth-child(2){
			margin-top: 20 / 100rem;
		}
	}
}
</style>